<template>
    <div class="hp100">
        <TableList
            :columns="recordCol"
            :data="recordList"
            :page.sync="query.pageIndex"
            :size.sync="query.pageSize"
            :total="recordTotal"
            @queryFun="getRecord"
        ></TableList>
        <Modal
            v-model="showExamDetail"
            width="1000"
            footer-hide
            class-name="fix-height-modal"
            title="答题详情"
        >
            <exam-detail ref="examDetail" :UEInfo="curUEInfo" v-if="showExamDetail"></exam-detail>
        </Modal>
    </div>
</template>
<script>
import examDetail from './answerQuestionDetail.vue';
import { queryExamAnalysisList } from '@/api/selfStudy/class_new.js';
export default {
    name: 'ExamQuestionAnswer',
    props: ['classNumberId', 'disbledAllBtn', 'classId', 'type'],
    components: { examDetail },
    data() {
        return {
            recordList: [],
            recordTotal: 0,
            query: {
                pageIndex: 1,
                pageSize: 10
            },
            showExamDetail: false,
            curUEInfo: {},
            recordCol: [
                //学员名称 课件名称 题目数量 答题数量 正确数量 详情进入查看这个学员的答题详情
                {
                    type: 'index',
                    title: '序号',
                    width: 60
                },
                {
                    type: 'html',
                    title: '题目名称',
                    key: 'name',
                    tooltip: true,
                    filter: (name) => {
                        return this.escape2Html(name);
                    }
                },
                {
                    title: '平均得分',
                    key: 'avgScore'
                },
                {
                    title: '正确率',
                    key: 'accuracy',
                    filter: (accuracy) => {
                        return `${accuracy * 100}%`;
                    }
                },
                {
                    type: 'html',
                    title: '答题使用最多的答案',
                    key: 'maxUserAnswer',
                    tooltip: true
                }
            ],
            timeout: ''
        };
    },
    watch: {
        classNumberId: function(val) {
            this.getRecord();
        }
    },
    filters: {},
    created() {},
    mounted() {
        if (this.classNumberId) {
            this.getRecord();
        }
    },
    beforeDestroy() {
        clearTimeout(this.timeout);
    },
    methods: {
        // getData(page, size) {
        //     this.query.pageIndex = page;
        //     this.query.pageSize = size;
        //     if (this.classNumberId) {
        //         this.getRecord();
        //     }
        // },
        getRecord() {
            if (this.type !== '考试') {
                return;
            }
            this.query.classNumberId = this.classNumberId;
            queryExamAnalysisList(this.query)
                .then(({ code, attribute: data, message }) => {
                    if (code == 1) {
                        this.recordList = data.dataList;
                        this.recordTotal = data.totalCount;
                        this.$emit('setExamInfo', data.base);
                        clearTimeout(this.timeout);
                        if (this.status === 1) {
                            this.timeout = setTimeout(() => {
                                this.getRecord();
                            }, 5000);
                        }
                    } else {
                        this.$Message.warning(message);
                    }
                })
                .catch((error) => {
                    this.$Message.error(error.message);
                });
        },
        changePage(page) {
            this.query.pageIndex = page;
            this.getRecord();
        },
        scoreClassReport(report) {
            scoreClassReport(report)
                .then((data) => {
                    if (data.code == 1) {
                        this.$Message.info('评级成功');
                    } else {
                        this.$Message.warning('评级失败');
                    }
                    this.getRecord();
                })
                .catch((error) => {
                    this.getRecord();
                    this.$Message.error(error.response.data.message);
                });
        },
        escape2Html(str, needReplace) {
            if (!str) {
                return;
            }
            let repStr = str.replace(/\{\{.*?\}\}/g, '___');
            let arrEntities = {
                lt: '<',
                gt: '>',
                nbsp: ' ',
                amp: '&',
                quot: '"'
            };
            // if (needReplace) {
            //     repStr = repStr.replace(/&(lt|gt|amp|quot|nbsp);/gi, function(all, t) {
            //         return arrEntities[t];
            //     });
            // }
            return repStr;
        }
    }
};
</script>
<style scoped></style>
